<template>
  <div class="container">
    <div class="bg">
      <img
        src="http://qzek6s6bf.hn-bkt.clouddn.com/%E5%90%8D%E8%83%9C%E5%8F%A4%E8%BF%B9_%E9%95%BF%E5%9F%8E.jpg"
        alt=""
      />
    </div>
    <div class="card">
      <!-- 点击头像展示弹框 -->
      <img @click="changUesrInfo" class="photo" :src="userInfo.photo" alt="" />
      <!-- 展示弹框 -->
      <van-dialog
        @click="confirm"
        v-model:show="show"
        title="修改头像"
        show-cancel-button
      >
        <van-form>
          <van-field label="新头像"> </van-field>
          <van-uploader
            v-model="fileList"
            multiple
            :max-count="1"
            :after-read="afterRead"
          />
        </van-form>
      </van-dialog>
      <p class="name">{{ userInfo.username }}</p>
      <p class="motto">{{ userInfo.motto }}</p>
      <button class="btn" @click="logOut">注销</button>
    </div>
  </div>
  <div class="line"></div>
  <div class="list">
    <ul>
      <li @click="tomyCollects">
        <img
          style="width: 0.5rem"
          src="http://qzek6s6bf.hn-bkt.clouddn.com/shoucang.png"
          alt="图片"
        />
        我的收藏
      </li>
      <li @click="toOrder">
        <img
          style="width: 0.5rem"
          src="http://qzek6s6bf.hn-bkt.clouddn.com/dingdan.png"
          alt="图片"
        />
        订单
      </li>
      <li @click="topersonInfo">
        <img
          style="width: 0.5rem"
          src="http://qzek6s6bf.hn-bkt.clouddn.com/zu175.png"
          alt="图片"
        />
        个人信息
      </li>
      <li @click="toaboutMe">
        <img
          style="width: 0.5rem"
          src="http://qzek6s6bf.hn-bkt.clouddn.com/guanyuwomen.png"
          alt="图片"
        />
        关于我们
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      myCollects: JSON.parse(localStorage.getItem("myCollects")),
      show: false,
      photo: "",
      fileList: [],
    };
  },
  created() {},
  computed: {},
  methods: {
    afterRead(file) {
      /*      console.log(file.content); */
      this.photo = file.content;
    },
    confirm() {
      this.userInfo.photo=this.photo
      JSON.stringify(localStorage.setItem("userInfo",this.userInfo))
    },
    changUesrInfo() {
      this.show = true;
    },

    tomyCollects() {
      this.$router.push("/myCollects");
    },
    toOrder() {
      this.$router.push("/order");
    },
    topersonInfo() {
      this.$router.push("/personInfo");
    },
    toaboutMe() {
      this.$router.push("/aboutMe");
    },
    logOut() {
      localStorage.clear;
      this.$router.push("/");
    },
  },
};
</script>
<style lang="scss" scoped>
.photo {
  margin-left: 5%;
}
.container {
  width: 100%;
}
.bg img {
  width: 100%;
  background-color: rgb(167, 245, 219);
  position: relative;
  z-index: -999;
}

.photo {
  position: absolute;
  width: 2rem;
  margin-left: 35%;
  top: 18%;
  border-radius: 10%;
  z-index: 999;
}

.line {
  width: 100%;
  height: 20%;
  border: 0.05rem solid rgb(230, 227, 227);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
li {
  margin-top: 6%;
  margin-left: 8%;
}
.card {
  width: 94%;
  height: 3rem;
  border-radius: 2%;
  border: 0.05rem solid rgb(230, 227, 227);
  margin-left: 3%;
}
.card p {
  margin-left: 10%;
}
.name {
  padding-top: 20%;
}
.motto {
  padding-top: 5%;
}
.btn {
  position: absolute;
  right: 10%;
  top: 35%;
  font-size: 20px;
  width: 25%;
  background-color: rgb(21, 153, 230);
  color: white;
  border-radius: 10%;
}
.list {
  width: 94%;
  height: 5rem;
  border-radius: 2%;
  border: 0.05rem solid rgb(230, 227, 227);
  margin-left: 3%;
}
</style>
